import React from "react";

const participants = [{
	identity : "Summer"
},{
	identity : "Tom"
},{
	identity : "Lucy"
},{
	identity : "ABCD"
}]

const Participants = () => {
	return (
		<div className='participants_container'>
			{
				participants.map((participant, index) => {
					return (
						<SingelParticipant
							identity={participant.identity}
							lastItem={participants.length === index + 1}
							key={participant.identity}
						/>
					);
				})
			}
		</div>
	)
}

const SingelParticipant = (props) => {
	const { identity, lastItem } = props;
	
	return (
		<>
			<p className='participants_paragraph'>{identity}</p>
			{
				!lastItem &&
				<span className='participants_separator_line'></span>
			}
		</>
	);
};

export default Participants;
